<template>
    <view class="page">
        <!-- title:页面标题
			isBack：返回按键 需要传true 默认不显示
		-->
        <back :isBack="true" :title="flag == '0' ? '填写勘察信息' : '修改勘察信息'" :isBg="false"
            :titleIconColor="'rgba(255, 255, 255, 1)'"></back>

        <scroll-view scroll-y class="content_box">
            <view class="dz_big_box">
                <view class="zcdz_box">装车地址</view>
                <view class="dizhi_text_box">
                    <view class="detail_adress_box">
                        <!-- <view class="top_adress_box">{{ detail }}</view> -->
                        <view class="bot_adress_box" v-if="location">{{ location }}</view>
                        <view class="bot_adress_box1" v-else @click="xiugaiBtn">请选择地址</view>
                    </view>
                    <view class="right_xiugai_box" @click="xiugaiBtn">
                        修改<u-icon style="margin-left: 10rpx;" name="arrow-right" color="rgba(199, 199, 199, 1)"
                            size="26"></u-icon>
                    </view>
                </view>

                <view class="lajidaishu_box">
                    <view class="garbage_box">垃圾{{ square }}数</view>
                    <input type="digit" inputmode="decimal" placeholder="请输入" :value="lajiNum" @blur="ljBlur"
                        placeholder-class="lxr_color">
                    <u-icon style="margin-left: 10rpx;" name="arrow-right" color="rgba(199, 199, 199, 1)"
                        size="26"></u-icon>
                </view>

                <!-- <view class="shifouyanjie_box">
                    <view class="garbage_box">是否沿街</view>
                    <view class="right_txt" @click="streetSel" v-if="streetCon == ''">请选择<u-icon
                            style="margin-left: 20rpx;" name="arrow-right" color="rgba(199, 199, 199, 1)"
                            size="26"></u-icon></view>
                    <view class="right_txt" style="color: black;" @click="streetSel" v-else>{{ streetCon }}<u-icon
                            style="margin-left: 20rpx;" name="arrow-right" color="rgba(199, 199, 199, 1)"
                            size="26"></u-icon></view>
                </view> -->
            </view>

            <view class="lajifenlei_box">
                <view class="left_txt_fenlei_box">垃圾品类</view>
                <view class="right_txt_fenlei" @click="categorySel" v-if="categoryCon == ''"><text style="font-weight: 400;">请选择</text><u-icon
                        style="margin-left: 26rpx;" name="arrow-right" color="rgba(199, 199, 199, 1)"
                        size="26"></u-icon></view>
                <view class="right_txt_fenlei" style="color: black;" @click="categorySel" v-else>{{ categoryCon
                    }}<u-icon style="margin-left: 20rpx;" name="arrow-right" color="rgba(199, 199, 199, 1)"
                        size="26"></u-icon></view>
            </view>
            <view class="remarks_box">
                <view class="left_txt_remarks_box">订单备注</view>
                <input type="text" placeholder="请输入" :value="ljRemask" @blur="bzBlur" placeholder-class="lxr_color">
                <u-icon style="margin-left: 10rpx;" name="arrow-right" color="rgba(199, 199, 199, 1)"
                    size="26"></u-icon>
            </view>

            <view class="sctp_box">
                <view class="scene_box">垃圾现场照片 <text class="zi_txt">(注:可添加多张)</text> </view>
                <view class="load_box">
                    <view class="zs_pic_box" v-for="(item, index) in lists" :key="index" @click="delPic(index)">
                        <image :src="item" mode="scaleToFill" />
                    </view>
                    <view class="add_pic_box" @click="upload_images">
                        <u-icon name="plus" color="rgba(199, 199, 199, 1)" size="60"></u-icon>
                    </view>
                    <view style=" width: 154rpx;" v-for="item in 4"></view>


                </view>
            </view>
            <!-- 支付 -->
            <view class="pay_box">
                <view class="yzf_dj_box">
                    <view>已支付定金</view>
                    <view style="font-weight: 600;">¥{{ first_pay_money }}</view>
                </view>
                <view class="yzf_dj_box">
                    <view>优惠券 </view>
                    <view style="font-weight: 600;">¥{{ credit }}</view>
                </view>

                <view class="ddzje_box" style="margin-top: 34rpx;">
                    <view class="garbage_box">待结清金额</view>
                    <view style="display: flex;justify-content: flex-end;align-items: center;">
                        <input v-if="detObj.method_id == '5' || detObj.method_id == '4'" type="digit" inputmode="decimal" placeholder="请输入"
                            placeholder-class="lxr_color" v-model="amountNum" @blur="amountBlur">
                        <input v-else type="digit" inputmode="decimal" :disabled="true" v-model="amountNum" @blur="amountBlur">
                        <u-icon v-if="detObj.method_id == '5' || detObj.method_id == '4'" style="margin-left: 10rpx;"
                            name="arrow-right" color="rgba(199, 199, 199, 1)" size="26"></u-icon>
                    </view>
                </view>
                <!-- <view class="ddzje_box">
                    <view class="garbage_box">订单总金额</view>
                    <view style="display: flex;justify-content: flex-end;align-items: center;">
                        <input type="number" placeholder="请输入" v-model="totalNum">
                        <u-icon style="margin-left: 10rpx;" name="arrow-right" color="rgba(199, 199, 199, 1)"
                            size="26"></u-icon>
                    </view>
                </view> -->

            </view>
            <view class="tijiao_box" :class="flag != 1 ? 'tijiao_box1' : ''">
                <view class="save_box" @click="$noMultipleClicks(msurveyEdit)" v-if="flag == 1">确认修改</view>
                <view class="save_box" @click="$noMultipleClicks(msurveyAdd)" v-else>保存</view>
                <view class="submit_box" @click="$noMultipleClicks(getsurveyConfimm)" v-if="flag == 1">提交</view>
            </view>
        </scroll-view>

        <view class="sel_pic_box" v-if="imgShow">
            <image :src="categoryImg" mode="scaleToFill" @click="clickImg" />
        </view>
        <lb-picker :pickerTitle="'选择垃圾品类'" ref="categorypicker" :list="categoryList" :empty-text="label"
            @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel" mask-color="rgba(9, 9, 11, .8)"
            :close-on-click-mask="false"></lb-picker>
        <!-- <lb-picker :pickerTitle="'是否沿街'" ref="streetpicker" :list="streetlist" :empty-text="label"
            @change="streetChange" @confirm="streetConfirm" @cancel="streetCancel" mask-color="rgba(9, 9, 11, .8)"
            :close-on-click-mask="false"></lb-picker> -->
    </view>
</template>
<script>
import LbPicker from '../../orderPage/components/lb-picker'
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy, LbPicker
    },
    data() {
        return {
            noClick: true,//防连点
            // streetlist: [
            //     {

            //         label: '沿街',
            //         id: 1,
            //     },
            //     {
            //         label: '非沿街',
            //         id: 2
            //     },

            // ],
            // streetCon: '',//是否沿街
            imgShow: false,
            action: "https://build.lwjcg.com/api/survey/upload?token=" + uni.getStorageSync("USERINFO"), // 演示地址
            showUploadList: true,
            // 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
            // 这里直接获取内部的lists变量即可
            lists: [],
            categoryList: [],
            categoryCon: '',//垃圾品类
            categoryImg: '',//垃圾各类的图片
            detObj: {},
            lajiNum: '',// 垃圾数
            amountNum: '',//尾款金额
            totalNum: '',//总金额
            waste_name: '',//垃圾分类
            // position_id: '',//是否沿街
            location: '',//地址
            detail: '',//详细地址
            waste_id: '',
            lat: '',
            lng: '',
            ljRemask: '',//垃圾备注
            imgArr: [],//本地图片路径数组
            survey_id: '',
            orderId: '',
            square: '',// 袋或方
            credit: '',// 优惠券
            first_pay_money: '',//已结清金额
            flag: '',//1:请求 非1不请求
            subId: '',
            bigHouse: '',//大地址
        }
    },
    onLoad(options) {

        this.survey_id = options.survey_id
        this.orderId = options.orderId
        this.detObj = JSON.parse(options.item)
        console.log(this.detObj, "312321312")
        this.square = this.detObj.category_name
        this.credit = this.detObj.credit
        this.first_pay_money = this.detObj.first_pay_money
        this.ljRemask = this.detObj.remark
        this.flag = this.detObj.flag
        this.orderId = this.detObj.id
        this.lajiNum = this.detObj.num * 1
        this.$store.state.insterPep = {}
        if (this.detObj.method_id == '1' || this.detObj.method_id == '2' || this.detObj.method_id == '3' || this.detObj.method_id == '6') {
            this.amountNum = ((Number(this.detObj.vehicle_price) + Number(this.detObj.product_price)) * Number(this.lajiNum) - Number(this.detObj.first_pay_money) - Number(this.detObj.credit)).toFixed(2)
        } else {
            this.amountNum = ''
        }
        // this.lat = this.detObj.lat
        // this.lng = this.detObj.lng
        // this.location = this.detObj.location
        // this.detail = this.detObj.detail
        // this.position_id = this.detObj.position_id
        // this.waste_id = this.detObj.waste_id
        // this.categoryCon = this.detObj.waste_name
        // this.streetCon = this.detObj.position_name
    },
    onShow() {
        var insterPep = this.$store.state.insterPep
        this.location = insterPep.location
        this.detail = insterPep.detail
        this.lng = insterPep.lng
        this.lat = insterPep.lat
        this.bigHouse = insterPep.bigHouse
        if (this.flag == '1') {
            this.getsurveyDetail()
        }
        if (uni.getStorageSync('dizhi') == '1') {
            this.lat = this.$store.state.adObj.lat
            this.lng = this.$store.state.adObj.lng
            this.location = this.$store.state.adObj.location
            this.detail = this.$store.state.adObj.detail
            uni.setStorageSync('dizhi', '0')
        }

    },
    onReady() {
    },
    methods: {
        getsurveyDetail() {
            let data = {
                order_id: this.orderId,
                survey_id: uni.getStorageSync('survey_id')
            }
            this.$Request.post(this.$api.word.surveyDetail, data).then(res => {
                if (res.code == 200) {
                    this.detObj = res.data
                    this.lajiNum = this.detObj.num * 1
                    this.lists = this.detObj.full_img_url
                    this.lat = this.detObj.lat
                    this.lng = this.detObj.lng
                    this.location = this.detObj.address
                    // this.position_id = this.detObj.position_id
                    this.waste_id = this.detObj.waste_id
                    this.categoryCon = this.detObj.waste_name
                    // this.streetCon = this.detObj.position_name
                    this.amountNum = this.detObj.last_pay_money
                    this.ljRemask = this.detObj.remark
                    this.imgArr = JSON.parse(this.detObj.img_url)
                }
            })
        },
        getsurveyConfimm() {
            let data = {
                order_id: this.orderId,
                survey_id: uni.getStorageSync('survey_id'),
                page: 1,
            }
            this.$Request.post(this.$api.word.surveyConfimm, data).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '提交成功',
                        icon: 'none'
                    })
                    
                    uni.setStorageSync('xiugai',true)
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1,
                            success: () => {
                                uni.$emit('subId', 3)
                            }
                        })

                    }, 600)
                }
            })
        },
        xiugaiBtn() {
            uni.navigateTo({
                url: '/userPage/adress/modif?jumps=' + 2
            })

        },
        delPic(index) {
            let data = {
                img_url: this.imgArr[index]
            }
            // console.log(data)
            this.$Request.post(this.$api.word.surveyRemove, data).then(res => {
                if (res.code == 200) {
                    uni.showToast({
                        title: '删除成功',
                        icon: 'none'
                    })
                }
            })
            this.lists.splice(index, 1)
            this.imgArr.splice(index, 1)



        },

        upload_images() {
            let that = this;
            uni.chooseImage({
                count: 9,
                sizeType: ['original', 'compressed'],

                sourceType: ['album', 'camera'], //从相册选择

                success: (res) => {
                    const tempFilePaths = res.tempFilePaths
                    tempFilePaths.forEach((i) => {
                        this.lists.push(i)

                    })
                    for (let i = 0; i < tempFilePaths.length; i++) {
                        uni.uploadFile({
                            url: "https://build.lwjcg.com/api/survey/upload?token=" + uni.getStorageSync("USERINFO"),
                            filePath: tempFilePaths[i],

                            name: 'img_url[]',
                            header: {
                                // token: uni.getStorageSync('token'),
                            },
                            success: (uploadFileRes) => {
                                let imgRes = JSON.parse(uploadFileRes.data);
                                that.imgArr.push(imgRes.data[0])
                                // console.log(that.imgArr)
                            }
                        })
                    }
                }
            });
            // }
        },
        bzBlur(e) {
            this.ljRemask = e.detail.value
        },
        amountBlur(e) {
            this.amountNum = e.detail.value
        },
        ljBlur(e) {
            this.lajiNum = e.detail.value
            if (this.detObj.method_id == '1' || this.detObj.method_id == '2' || this.detObj.method_id == '3' || this.detObj.method_id == '6') {
                this.amountNum = ((Number(this.detObj.vehicle_price) + Number(this.detObj.product_price)) * Number(this.lajiNum) - Number(this.detObj.first_pay_money) - Number(this.detObj.credit)).toFixed(2)
            } else {
                this.amountNum = ''
            }
        },
        // 是否沿街选择
        // streetSel() {
        //     this.$refs.streetpicker.show() // 显示
        // },
        // streetChange(e) {//是否沿街停止滑动触发
        // },
        // streetConfirm(e) {//是否沿街点击确认触发
        //     this.streetCon = e.item.label
        //     this.position_id = e.item.id
        // },
        // streetCancel(e) {//是否沿街点击取消触发
        // },
        clickImg() {
            uni.previewImage({
                urls: [this.categoryImg], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
                current: '', // 当前显示图片的http链接，默认是第一个
                success: function (res) { },
                fail: function (res) { },
                complete: function (res) { },
            })
        },
        msurveyAdd() {
            // console.log(this.location, "location")
            if (this.location == undefined) {
                uni.showToast({
                    title: '请选则地址',
                    icon: 'none'
                })
            } else if (this.imgArr.length == 0) {

                uni.showToast({
                    title: '请上传垃圾现场照片',
                    icon: 'none'
                })
            } else if (this.lajiNum == '') {
                uni.showToast({
                    title: '请输入数量',
                    icon: 'none'
                })
            } else if (this.categoryCon == '') {
                uni.showToast({
                    title: '请确认垃圾品类',
                    icon: 'none'
                })
            } else if (this.ljRemask == '') {
                uni.showToast({
                    title: '请输入订单备注',
                    icon: 'none'
                })
            } else if (this.amountNum == '') {
                uni.showToast({
                    title: '请输入待结清金额',
                    icon: 'none'
                })
            } else {
                let data = {
                    order_id: this.orderId,
                    survey_id: uni.getStorageSync('survey_id'),
                    // position_id: this.position_id,
                    address: this.location,
                    lng: this.lng,
                    lat: this.lat,
                    waste_id: this.waste_id,
                    last_pay_money: this.amountNum,
                    num: this.lajiNum,
                    remark: this.ljRemask,
                    img_url: this.imgArr
                }
                this.$Request.post(this.$api.word.surveyAdd, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: '保存成功',
                            icon: 'none'
                        })
                        uni.setStorageSync('xiugai',true)
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 600)
                    }
                })
            }

        },
        msurveyEdit() {
            if (this.imgArr.length == 0) {

                uni.showToast({
                    title: '请上传垃圾现场照片',
                    icon: 'none'
                })
            } else if (this.lajiNum == '') {
                uni.showToast({
                    title: '请输入数量',
                    icon: 'none'
                })
            } else if (this.categoryCon == '') {
                uni.showToast({
                    title: '请确认垃圾品类',
                    icon: 'none'
                })
            } else if (this.amountNum == '') {
                uni.showToast({
                    title: '请输入待结清金额',
                    icon: 'none'
                })
            } else if (this.ljRemask == '') {
                uni.showToast({
                    title: '请输入订单备注',
                    icon: 'none'
                })
            } else if (this.location == undefined) {
                uni.showToast({
                    title: '请选则地址',
                    icon: 'none'
                })
            } else {
                let data = {
                    order_id: this.detObj.order_id,
                    survey_id: uni.getStorageSync('survey_id'),
                    // position_id: this.position_id,
                    address: this.location,
                    lng: this.lng,
                    lat: this.lat,
                    waste_id: this.waste_id,
                    last_pay_money: this.amountNum,
                    num: this.lajiNum,
                    remark: this.ljRemask,
                    img_url: this.imgArr
                }
                this.$Request.post(this.$api.word.surveyEdit, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: '修改成功',
                            icon: 'none'
                        })
                        uni.setStorageSync('xiugai',true)
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 600)
                    }
                })
            }

        },
        getWaste() {
            this.$Request.post(this.$api.index.wasteList).then(res => {
                if (res.code == 200) {
                    res.data.forEach(item => {
                        item['label'] = item.waste_name
                    });
                    this.categoryList = res.data
                }
            })
        },

        categorySel() {
            this.$refs.categorypicker.show() // 显示
            this.getWaste()
            this.imgShow = true//图片框显示
        },
        handleChange(e) {//停止滑动触发
            this.categoryImg = e.item.img_url
        },
        handleConfirm(e) {//点击确认触发
            this.imgShow = false//图片框关闭
            this.waste_id = e.item.id
            this.categoryCon = e.item.label
        },
        handleCancel(e) {//点击取消触发
            this.imgShow = false//图片框关闭
        },
    }
}
</script>
<style lang="scss">
/deep/.u-list-item {
    width: 140rpx !important;
    height: 132rpx !important;
}

.lxr_color {
    font-weight: 400;
    font-size: 28rpx;
    color: #a6a6a6;
}

.page {
    width: 100vw;
    min-height: 100vh;
    background-image: url('https://build.lwjcg.com/uploads/order_detail.png');
    background-size: 100% 100%;
    position: relative;

    .sel_pic_box {
        width: 480rpx;
        height: 540rpx;
        border-radius: 38rpx;
        position: absolute;
        border: 4rpx solid rgba(255, 255, 255, 1);
        left: 0;
        right: 0;
        top: 346rpx;
        margin: auto;
        z-index: 999999;

        image {
            width: 100%;
            height: 100%;
            border-radius: 38rpx;
        }

    }

    .content_box {
        width: 100%;
        height: calc(100vh - 190rpx);

        .dz_big_box {
            width: 704rpx;
            height: 318rpx;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: 20rpx auto;
            box-sizing: border-box;
            padding: 36rpx 46rpx 0 36rpx;

            .zcdz_box {
                height: 40rpx;
                opacity: 1;
                /** 文本1 */
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);

            }
        }

        .dizhi_text_box {
            width: 100%;
            height: 132rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2rpx solid rgba(240, 240, 240, 1);

            .detail_adress_box {
                width: 450rpx;
                height: 90rpx;

                .top_adress_box {
                    width: 100%;
                    height: 45rpx;
                    line-height: 50rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 1);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .bot_adress_box {
                    width: 100%;
                    height: 90rpx;
                    line-height: 90rpx;
                    font-size: 28rpx;
                    font-weight: 700;
                    color: rgba(0, 0, 0, 1);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .bot_adress_box1 {
                    width: 100%;
                    height: 90rpx;
                    line-height: 90rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }



            .right_xiugai_box {
                height: 90rpx;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 90rpx;
                color: rgba(166, 166, 166, 1);
            }
        }

        .lajidaishu_box {
            width: 100%;
            height: 104rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // border-bottom: 2rpx solid rgba(240, 240, 240, 1);

            .garbage_box {
                width: 114rpx;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);

            }

            input {
                width: 460rpx;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                font-weight: 700;
                color: rgba(0, 0, 0, 1);
                text-align: right;
            }
        }

        .shifouyanjie_box {
            width: 100%;
            height: 104rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .garbage_box {
                width: 114rpx;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);

            }

            .right_txt {
                width: 200rpx;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                text-align: right;
                color: rgba(166, 166, 166, 1);
            }

        }


        .lajifenlei_box {
            width: 704rpx;
            height: 96rpx;
            opacity: 1;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 42rpx 0 34rpx;
            margin-bottom: 20rpx;

            .left_txt_fenlei_box {
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);

            }

            .right_txt_fenlei {
                // width: 200rpx;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                font-weight: 700;
                text-align: right;
                color: rgba(166, 166, 166, 1);
            }

        }

        .remarks_box {
            width: 704rpx;
            height: 96rpx;
            opacity: 1;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 42rpx 0 34rpx;
            margin-bottom: 20rpx;

            .left_txt_remarks_box_box {
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);

            }

            .right_txt_fenlei {
                // width: 200rpx;
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                text-align: right;
                color: rgba(166, 166, 166, 1);
            }

            input {
                width: 460rpx;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 700;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);
                text-align: right;
            }

        }

        .sctp_box {
            width: 704rpx;
            min-height: 274rpx;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            box-sizing: border-box;
            padding: 28rpx 0 0 34rpx;
            margin-bottom: 20rpx;

            .scene_box {
                height: 40rpx;
                opacity: 1;
                /** 文本1 */
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);
                margin-bottom: 32rpx;

                .zi_txt {
                    font-size: 26rpx;
                    font-weight: 400;
                    color: rgba(128, 128, 128, 1);
                }


            }

            .load_box {
                width: 100%;
                min-height: 152rpx;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                padding-bottom: 20rpx;

                .zs_pic_box {
                    width: 154rpx;
                    height: 132rpx;
                    opacity: 1;
                    border-radius: 18rpx;
                    background: rgba(240, 240, 240, 1);
                    flex-shrink: 0;
                    margin-bottom: 10rpx;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 18rpx;
                    }

                }

                .add_pic_box {
                    width: 154rpx;
                    height: 132rpx;
                    opacity: 1;
                    border-radius: 18rpx;
                    background: rgba(240, 240, 240, 1);
                    text-align: center;
                    line-height: 154rpx;

                }
            }

        }


        .pay_box {
            width: 704rpx;
            min-height: 272rpx;
            border-radius: 28rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            box-sizing: border-box;
            padding-top: 32rpx;
            margin-bottom: 20rpx;

            .yzf_dj_box {
                width: 604rpx;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(51, 51, 51, 1);
                display: flex;
                justify-content: space-between;
                margin: auto;
                margin-bottom: 10rpx;

            }

            .ddzje_box {
                height: 108rpx;
                width: 604rpx;
                margin: auto;
                border-top: 2rpx solid rgba(240, 240, 240, 1);
                display: flex;
                justify-content: space-between;
                align-items: center;

                .garbage_box {
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 40rpx;
                    color: rgba(51, 51, 51, 1);

                }

                input {
                    width: 300rpx;
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 700;
                    line-height: 40rpx;
                    color: rgba(51, 51, 51, 1);
                    text-align: right;
                }
            }


        }

        .tijiao_box {
            width: 750rpx;
            height: 250rpx;
            opacity: 1;
            background: rgba(255, 255, 255, 1);
            box-sizing: border-box;
            padding: 70rpx 96rpx;
            display: flex;
            justify-content: space-between;

            &.tijiao_box1 {
                display: flex;
                justify-content: center;
            }

            .save_box {
                width: 234rpx;
                height: 80rpx;
                border-radius: 16rpx;
                text-align: center;
                line-height: 80rpx;
                border: 2rpx solid rgba(128, 128, 128, 1);
                font-size: 36rpx;
                font-weight: 500;
                color: rgba(56, 56, 56, 1);

            }

            .submit_box {
                width: 234rpx;
                height: 80rpx;
                border-radius: 16rpx;
                text-align: center;
                line-height: 80rpx;
                background: rgba(26, 194, 121, 1);
                font-size: 36rpx;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
            }
        }
    }

}
</style>